import React from 'react';
import ReactDOM from 'react-dom';


//React两种组件

//1函数
function Welcome(props) {
    return <h1>Hello,{props.name}</h1>
}
// 使用方法
<Welcome name="zhangdeshou"/>
// 被翻译成React.createElement(Welcome)
//Welcome是个函数 那么就调用这个函数 获取其返回值



//2 类组件
class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {date: new Date()};
    }

    render() {
        return (
            <div>
                <h1>Hello,{this.props.name}</h1>
                <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}
//使用方法
<Hello name="frank"/>

//标签传给ReactDOM.render()的时候被翻译成如下
// React.createElement(Hello, {
//     name: "frank"
// });

//Hello 如是一个函数 则会调用函数 获取其返回值
        //如果是一个类 则在类面前加个new（这会导致执行constructor）获取一个组件对象
        //然后调用对象的render方法 获取其返回值

ReactDOM.render(
    <Welcome/>,
    <Hello/>,
    document.getElementById('root')
);


